<template>
    <div class="login">
        <el-container>
            <el-header>生态林一卡通系统</el-header>
            <br />
            <el-main>
                <el-input class="cardInput" v-model="adminAcc" placeholder="请输入管理员账号" />
                <br /><br />
                <el-input class="cardInput" v-model="adminPwd" placeholder="请输入密码" />
                <br />
                <el-button class="confirmButton" type="primary" style="width:180px"
                    @click="adminLogin()">确定
                </el-button>
            </el-main>
            <el-footer>
                <p @click="route.push('/')">Copy Right: 龙吟信息</p>
            </el-footer>
        </el-container>
    </div>
</template>

<script lang="ts">
import { reactive, toRefs } from 'vue'
import { ElMessage } from 'element-plus'
// @ts-ignore
import { useStore } from '../store'
import { useRouter } from 'vue-router'
import apiSet from '../plugins/dbApi'

export default {
    setup() {
        const store = useStore()
        const route = useRouter()

        const data = reactive({
            adminAcc: '',
            adminPwd: '',
        })
        const method = reactive({
            adminLogin: () => {
                if (!data.adminAcc) {
                    ElMessage.warning('请输入账号')
                    return
                } else if (!/^[a-zA-Z0-9]+$/.test(data.adminAcc)) {
                    ElMessage.warning('账号格式错误')
                    return
                }
                apiSet.adminlogin(data.adminAcc,data.adminPwd).then(res => {
                    console.log(res)
                    if (res.status == 500 || res.status == 401) {
                        ElMessage.error(res.message)
                    } else {
                        ElMessage.success('登录成功')
                        store.setAdminName(res.data)
                        route.push('/dashboard')
                    }
                })
            }
        })
        return {
            ...toRefs(data),
            ...toRefs(method),
            route,
        }
    }
}
</script>

<style scoped>
    @import '../assets/css/login.css';
</style>